<template>
  <div class="view-popover">
    <fx-card title="基础用法">
      <fx-popover title="标题" content="文字内容">
        <template #reference>
          <fx-button>弹出框</fx-button>
        </template>
      </fx-popover>
      <template #hide>
        <pre v-highlight="baseCode"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="自带按钮">
      <fx-popover title="你确定啊?" width="150" position="left" type="success" is-confirm @confirm="confirm">
        <template #reference>
          <fx-button class="mr20">取消/确定</fx-button>
        </template>
      </fx-popover>
      <fx-popover title="你确定啊?" type="warning" is-confirm width="150"
                  cancel-text="关闭" define-text="成功" @confirm="confirm">
        <template #reference>
          <fx-button>确定</fx-button>
        </template>
      </fx-popover>
      <template #hide>
        <pre v-highlight="btnCode"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="嵌套内容">
      <fx-popover width="300">
        <template #reference>
          <fx-button>弹出框</fx-button>
        </template>
        <ul v-infinite-scroll="baseLoad">
          <li v-for="i in baseCount" :key="i" class="list-item">{{ i }}</li>
        </ul>
      </fx-popover>
      <template #hide>
        <pre v-highlight="slotCode"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="自定义位置">
      <div class="mb10">
        <fx-popover :position="position" title="标题" content="文字内容">
          <template #reference>
            <fx-button>弹出框</fx-button>
          </template>
        </fx-popover>
      </div>
      <fx-radio-group v-model="position" size="mini">
        <fx-radio-button label="topLeft">topLeft</fx-radio-button>
        <fx-radio-button label="top">top</fx-radio-button>
        <fx-radio-button label="topRight">topRight</fx-radio-button>
        <fx-radio-button label="leftTop">leftTop</fx-radio-button>
        <fx-radio-button label="left">left</fx-radio-button>
        <fx-radio-button label="leftBottom">leftBottom</fx-radio-button>
        <fx-radio-button label="bottomRight">bottomRight</fx-radio-button>
        <fx-radio-button label="bottom">bottom</fx-radio-button>
        <fx-radio-button label="bottomLeft">bottomLeft</fx-radio-button>
        <fx-radio-button label="rightBottom">rightBottom</fx-radio-button>
        <fx-radio-button label="right">right</fx-radio-button>
        <fx-radio-button label="rightTop">rightTop</fx-radio-button>
      </fx-radio-group>
      <template #hide>
        <pre v-highlight="positionCode"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="触发方式">
      <fx-popover class="mr10" trigger="hover" title="Hover" content="Hover事件">
        <template #reference>
          <fx-button>Hover</fx-button>
        </template>
      </fx-popover>
      <fx-popover class="mr10" trigger="click" title="Click" content="Click事件">
        <template #reference>
          <fx-button>Click</fx-button>
        </template>
      </fx-popover>
      <fx-popover class="mr10" trigger="focus" title="Focus" content="Focus事件">
        <template #reference>
          <fx-button>Focus</fx-button>
        </template>
      </fx-popover>
      <template #hide>
        <pre v-highlight="triggerCode"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="触发事件">
      <fx-popover class="mr10" title="触发时事件" content="Popover事件"
                  @show="popoverShow" @after-show="popoverAfterShow"
                  @hide="popoverHide" @after-hide="popoverAfterHide">
        <template #reference>
          <fx-button>触发时事件</fx-button>
        </template>
      </fx-popover>
      <template #hide>
        <pre v-highlight="eventCode"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="API 属性">
      <fx-table :data="popoverApi">
        <fx-table-item prop="name" label="属性"></fx-table-item>
        <fx-table-item prop="directions" label="说明"></fx-table-item>
        <fx-table-item prop="type" label="类型"></fx-table-item>
        <fx-table-item prop="value" label="可选值"></fx-table-item>
        <fx-table-item prop="default" label="默认"></fx-table-item>
      </fx-table>
    </fx-card>
    <fx-card title="API 方法">
      <fx-table :data="popoverMethod">
        <fx-table-item prop="name" label="属性"></fx-table-item>
        <fx-table-item prop="directions" label="说明"></fx-table-item>
        <fx-table-item prop="callback" label="回调参数"></fx-table-item>
      </fx-table>
    </fx-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { FxMessage } from '@/base'

const popoverApi = [
  {
    name: 'position',
    directions: '弹出层位置',
    type: 'String',
    value: 'topLeft | top | topRight | rightTop | right | rightBottom | bottomLeft | bottom | bottomRight | leftTop | left | leftBottom',
    default: 'rightTop'
  },
  { name: 'title', directions: '弹出层标题', type: 'String' },
  { name: 'content', directions: '弹出层内容', type: 'String' },
  { name: 'width', directions: '弹出层宽度自定义', type: 'String', default: '120px' },
  { name: 'trigger', directions: '触发方式', type: 'String', value: 'hover | click | focus', default: 'click' },
  { name: 'disabled', directions: '禁止触发', type: 'Boolean' },
  { name: 'type', directions: '弹窗类型', type: 'String', value: 'primary | success | warning | error' },
  { name: 'isConfirm', directions: '是否需要按钮', type: 'Boolean', default: false },
  { name: 'cancelBtn', directions: '是否需要取消按钮', type: 'Boolean', default: true },
  { name: 'cancelText', directions: '取消按钮文字', type: 'String', default: '取消' },
  { name: 'defineText', directions: '确定按钮文字', type: 'String', default: '确定' }
]
const popoverMethod = [
  { name: 'confirm', directions: '点击按钮时触发，仅在开启 isConfirm = true 时生效', callback: 'define 为点击确认按钮，cancel 为点击取消按钮' },
  { name: 'show', directions: '显示时触发' },
  { name: 'after-show', directions: '显示动画播放完毕后触发' },
  { name: 'hide', directions: '隐藏时触发' },
  { name: 'after-hide', directions: '隐藏动画播放完毕后触发' }
]

const position = ref<string>('left')
const baseCount = ref<number>(10)
const confirm = (event: string) => {
  if (event === 'define') {
    FxMessage.success(event)
  } else if (event === 'cancel') {
    FxMessage.warning(event)
  }
}
const baseLoad = () => {
  baseCount.value += 2
}
const popoverShow = () => {
  FxMessage.success('show')
}
const popoverAfterShow = () => {
  FxMessage.success('after-show')
}
const popoverHide = () => {
  FxMessage.success('hide')
}
const popoverAfterHide = () => {
  FxMessage.success('after-hide')
}

const baseCode = `<fx-popover title="标题" content="文字内容">
  <template #reference>
    <fx-button>弹出框</fx-button>
  </template>
</fx-popover>`
const btnCode = `<fx-popover title="你确定啊?" width="150" position="left" type="success" is-confirm @confirm="confirm">
  <template #reference>
    <fx-button class="mr20">取消/确定</fx-button>
  </template>
</fx-popover>
<fx-popover title="你确定啊?" type="warning" is-confirm width="150" cancel-text="关闭" define-text="成功" @confirm="confirm">
  <template #reference>
    <fx-button>确定</fx-button>
  </template>
</fx-popover>

const confirm = (event) => {
  if (event === 'define') {
    FxMessage.success(event)
  } else if (event === 'cancel') {
    FxMessage.warning(event)
  }
}`
const slotCode = `<fx-popover width="300">
  <template #reference>
    <fx-button>弹出框</fx-button>
  </template>
  <ul v-infinite-scroll="baseLoad">
    <li v-for="i in baseCount" :key="i" class="list-item">{{ i }}</li>
  </ul>
</fx-popover>`
const positionCode = `<div class="mb10">
  <fx-popover :position="position" title="标题" content="文字内容">
    <template #reference>
      <fx-button>弹出框</fx-button>
    </template>
  </fx-popover>
</div>
<fx-radio-group v-model="position" size="mini">
  <fx-radio-button label="topLeft">topLeft</fx-radio-button>
  <fx-radio-button label="top">top</fx-radio-button>
  <fx-radio-button label="topRight">topRight</fx-radio-button>
  <fx-radio-button label="leftTop">leftTop</fx-radio-button>
  <fx-radio-button label="left">left</fx-radio-button>
  <fx-radio-button label="leftBottom">leftBottom</fx-radio-button>
  <fx-radio-button label="bottomRight">bottomRight</fx-radio-button>
  <fx-radio-button label="bottom">bottom</fx-radio-button>
  <fx-radio-button label="bottomLeft">bottomLeft</fx-radio-button>
  <fx-radio-button label="rightBottom">rightBottom</fx-radio-button>
  <fx-radio-button label="right">right</fx-radio-button>
  <fx-radio-button label="rightTop">rightTop</fx-radio-button>
</fx-radio-group>`
const triggerCode = `<fx-popover class="mr10" trigger="hover" title="Hover" content="Hover事件">
  <template #reference>
    <fx-button>Hover</fx-button>
  </template>
</fx-popover>
<fx-popover class="mr10" trigger="click" title="Click" content="Click事件">
  <template #reference>
    <fx-button>Click</fx-button>
  </template>
</fx-popover>
<fx-popover class="mr10" trigger="focus" title="Focus" content="Focus事件">
  <template #reference>
    <fx-button>Focus</fx-button>
  </template>
</fx-popover>`
const eventCode = `<fx-popover class="mr10" title="触发时事件" content="Popover事件" @show="popoverShow" @after-show="popoverAfterShow" @hide="popoverHide" @after-hide="popoverAfterHide">
  <template #reference>
    <fx-button>触发时事件</fx-button>
  </template>
</fx-popover>`
</script>

<style scoped lang="scss">
.view-popover {
  ul {
    height: 160px;
    width: 100%;
    overflow: auto;
    background-color: #fff;

    > li {
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 30px;
      background-color: rgba(45, 183, 245, 0.5);
      margin-bottom: 20px;
    }
  }
}
</style>
